<!DOCTYPE html>
<html>
<head>
    <title>水波背景</title>
    <meta charset="utf-8" />
    <style>
        html, body {width:100%; height:100%; padding:0; margin:0;}
    </style>
</head>
<body>
<canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>
<script type="text/javascript">
    //获得canvas容器
    var canvas = document.getElementById('canvas');
    //获得画笔
    var ctx = canvas.getContext('2d');
    //canvas设置宽度
    canvas.width = canvas.parentNode.offsetWidth;
    //canvas设置高度
    canvas.height = canvas.parentNode.offsetHeight;
    //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
    window.requestAnimFrame = (function(){
        return window.requestAnimationFrame  ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    // 波浪大小
    var boHeight = canvas.height / 10;
    var posHeight = canvas.height / 1.2;
    //初始角度为0
    var step = 0;
    //定义三条不同波浪的颜色
    var lines = ["rgba(0,222,255, 0.2)", "rgba(157,192,249, 0.2)", "rgba(0,168,255, 0.2)"];
    function loop(){
        //清除canvas内容
        ctx.clearRect(0,0,canvas.width,canvas.height);
        step++;
        //画3个不同颜色的矩形
        for(var j = lines.length - 1; j >= 0; j--) {
            ctx.fillStyle = lines[j];
            //每个矩形的角度都不同，每个之间相差45度
            var angle = (step+j*50)*Math.PI/180;
            var deltaHeight = Math.sin(angle) * boHeight;
            var deltaHeightRight = Math.cos(angle) * boHeight;
            ctx.beginPath();
            ctx.moveTo(0, posHeight+deltaHeight);
            ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight);
            ctx.lineTo(canvas.width, canvas.height);
            ctx.lineTo(0, canvas.height);
            ctx.lineTo(0, posHeight+deltaHeight);
            ctx.closePath();
            ctx.fill();
        }
        requestAnimFrame(loop);
    }
    loop();
</script>
</body>
</html>